import {Component} from 'react';
import theme from '@/components/Css/theme'; //主题色
// 组件部分
import Head from '@/components/Head'; //头部导航栏部分
import LeftNav from '@/components/LeftNav'; //左边导航栏部分
import HeadSonNav from '@/components/HeadSonNav'; // 头部导航下面栏部分

// 插件部分
import {Layout} from 'antd';
const {Header, Content, Sider} = Layout;
class App extends Component {
  constructor (props) {
    super (props);
  }
  state = {
    collapsed: false, //左边导航栏部分是否可收起
  };
  // 左边导航栏部分收起
  onCollapse = collapsed => {
    this.setState ({collapsed});
  };
  componentWillMount () {}
  render () {
    return (
      <Layout style={{height: `100%`}}>
        {/* 头部导航栏部分 */}
        <Header style={{backgroundColor: theme.backgroundColor}}>
          <Head />
        </Header>
        <Layout>
          {/* 左边导航栏部分 */}
          {/* <Sider
            style={{backgroundColor: theme.backgroundColor}}
            collapsible
            collapsed={this.state.collapsed}
            onCollapse={this.onCollapse}
          >
            <LeftNav />
          </Sider> */}

          <Layout style={{padding: '0 24px 24px'}}>
            {/* 头部导航下面栏部分 */}
            <HeadSonNav />
            <Content style={{overflowY: 'auto'}} className="page-box">
              {this.props.children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    );
  }
}

export default App;
